import { Layout, Menu } from "antd";
import { Outlet, useNavigate } from "react-router-dom";

export default function Index() {
  const navigate = useNavigate();

  function handleMenuSelect({ key }: any) {
    console.log("key", key);
    navigate(key);
  }

  return (
    <Layout>
      <Layout.Sider>
        <Menu
          mode="inline"
          items={[
            {
              key: "/dashboard",
              label: "Dashboard",
              children: [
                {
                  key: "/dashboard/console",
                  label: "主控台",
                },
                {
                  key: "/dashboard/workplace",
                  label: "工作台",
                },
              ],
            },
          ]}
          onSelect={handleMenuSelect}
        ></Menu>
      </Layout.Sider>

      <Layout>
        <Layout.Header />
        <Layout.Content>
          <Outlet />
        </Layout.Content>
      </Layout>
    </Layout>
  );
}
